<template>
  <div id="xsjh-create">
    <div style="padding-top: 10px"></div>
    <el-row type="flex" justify="center">
      <el-col :span="8">
        <el-form
          label-position="right"
          label-width="110px"
          ref="formLabelAlign"
          :model="formLabelAlign"
          :rules="rules"
          ><!-- :inline="true":自动多行处理 -->
          <el-form-item label="客户名称" prop="sc_customer_name">
            <el-input
              placeholder="请输入客户名称"
              v-model="formLabelAlign.sc_customer_name"
            ></el-input>
          </el-form-item>
          <el-form-item label="机会来源" prop="opp_id">
            <el-select
              style="width: 100%"
              v-model="formLabelAlign.opp_id"
              placeholder="请选择机会来源"
            >
              <el-option
                v-for="item in opp_options"
                :key="item.oppId"
                :label="item.oppTip"
                :value="item.oppId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="机会来源描述" prop="opp_description">
            <el-input
              placeholder="请输入机会来源描述"
              v-model="formLabelAlign.opp_description"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="sc_contact">
            <el-input
              placeholder="请输入联系人名称"
              v-model="formLabelAlign.sc_contact"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="sc_contact_number">
            <el-input
              placeholder="请输入联系人电话"
              v-model.number="formLabelAlign.sc_contact_number"
            ></el-input>
          </el-form-item>
          <el-form-item label="成功几率" prop="sc_percentage_of_success">
            <el-input
              style="width: 10vw"
              placeholder="0~100"
              v-model.number="formLabelAlign.sc_percentage_of_success"
              ><template slot="append">%</template></el-input
            >
          </el-form-item>
          <el-form-item label="概要" prop="sc_outline">
            <el-input
              placeholder="请输入概要"
              v-model="formLabelAlign.sc_outline"
            ></el-input>
          </el-form-item>

          <div style="padding-top: 10px"></div>
          <el-form-item>
            <el-button
              type="primary"
              :round="true"
              @click="submitForm('formLabelAlign')"
              style="width: 20vw"
              >立即创建</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    let checkNum1 = (rule, value, callback) => {
      let err = new Error("请输入正确的电话号码!");
      if (!value) {
        return callback(err);
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(err);
        } else {
          if ((value + "").length != 11) {
            callback(err);
          } else {
            callback();
          }
        }
      }, 20);
    };
    let checkNum2 = (rule, value, callback) => {
      let err = new Error("请输入0到100之间的整数!");
      if (!value) {
        return callback(err);
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(err);
        } else {
          if (value < 0 || value > 100) {
            callback(err);
          } else {
            callback();
          }
        }
      }, 20);
    };
    return {
      opp_options: null,
      formLabelAlign: {
        // sc_id: null,
        sc_customer_name: "", //客户名称
        opp_id: "", //机会来源
        opp_description: "", //机会来源的描述
        sc_contact: "", //联系人
        sc_contact_number: "", //联系人电话
        sc_percentage_of_success: "", //成功几率%
        sc_outline: "", //概要
        // sc_creator_id: null, //创建人
        // sc_creation_time: null, //创建时间
        // sc_assign_to_id: null, //指派给
        // sc_assign_time: null, //指派时间
        // opp_state_id: null, //销售机会状态
      },
      rules: {
        sc_customer_name: [
          { required: true, message: "请输入客户名称!", trigger: "change" },
        ],
        opp_id: [
          { required: true, message: "请选择机会来源!", trigger: "change" },
        ],
        opp_description: [
          { required: true, message: "请输入机会来源描述!", trigger: "change" },
        ],
        sc_contact: [
          { required: true, message: "请输入联系人!", trigger: "change" },
        ],
        sc_contact_number: [
          { required: true, message: "电话号码不能为空!" },
          { validator: checkNum1, trigger: "change" },
        ],
        sc_percentage_of_success: [
          { required: true, message: "成功几率不能为空!" },
          { validator: checkNum2, trigger: "change" },
        ],
        sc_outline: [
          { required: true, message: "请输入概要!", trigger: "change" },
        ],
      },
    };
  },
  created: function () {
    this.load_Opp();
  },
  methods: {
    load_Opp() {
      this.$axios({
        method: "post",
        crossdomain: true,
        url: "/opportunity/oop",
      }).then((response) => {
        // console.log(response.data.data[0]); //请求成功返回的数据
        this.opp_options = response.data.data[0];
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        // console.log(this.formLabelAlign);
        if (valid) {
          this.$axios({
            method: "post",
            crossdomain: true,
            url: "/sale-chance/add",
            data: this.$qs.stringify({
              //这里是发送给后台的数据
              scCustomerName: this.formLabelAlign.sc_customer_name, //客户名称
              oppId: this.formLabelAlign.opp_id, //机会来源
              oppDescription: this.formLabelAlign.opp_description, //机会来源的描述
              scContact: this.formLabelAlign.sc_contact, //联系人
              scContactNumber: this.formLabelAlign.sc_contact_number, //联系人电话
              scPercentageOfSuccess:
                this.formLabelAlign.sc_percentage_of_success, //成功几率%
              scOutline: this.formLabelAlign.sc_outline, //概要
            }),
          }).then((response) => {
            // console.log(response); //请求成功返回的数据
            if (response.data.type == "OK") {
              this.$notify({
                title: "添加成功啦",
                type: "success",
                duration: "1000", // 1000ms后关闭
                showClose: false,
              });
              //   this.$router.replace({ path: "/" });
              this.formLabelAlign = {
                sc_customer_name: "", //客户名称
                opp_id: "", //机会来源
                opp_description: "", //机会来源的描述
                sc_contact: "", //联系人
                sc_contact_number: "", //联系人电话
                sc_percentage_of_success: "", //成功几率%
                sc_outline: "", //概要
              };
            }
          });
        } else {
          this.$notify({
            title: "错了哦",
            message: "还有选项没有填对呢",
            type: "error",
            duration: "4000", // 1000ms后关闭
            showClose: false,
          });
          return false;
        }
      });
    },
  },
};
</script>

